<template>
    <div>
        <vue-draggable-resizable
          :draggable="false"
          :resizable="false"
          :parent="true"
          :x='item.position.x'
          :y='item.position.y'
          :w='item.size.width'
          :h='item.size.height'
          v-for="(item,index) in items" :key="index"
        >
          <v-chart :options="item.options" :autoresize="true"/>
        </vue-draggable-resizable>
    </div>
</template>

<style scoped>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
  width: 100%;
  height: 100%;
}
/* .vdr{
  border:none !important;
} */
</style>

<script>
import ECharts from "vue-echarts";

export default {
  components: {
    "v-chart": ECharts
  },
  data() {
    return {
      items:[],
    };
  },
  methods:{
      onResize: function (x, y, width, height) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
      },
      onDrag: function (x, y) {
        this.x = x
        this.y = y
      }
  }
};
</script>